﻿@{
    ViewData["Title"] = "Vue with Element Plus";
    Layout = null;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>@ViewData["Title"]</title>
    <!-- 引入Element Plus的CSS文件 -->

    <script src="~/lib/vue/dist/vue.global.js"></script>
    <script src="~/lib/element-plus/dist/index.full.js"></script>
    <link href="~/lib/element-plus/dist/index.css" rel="stylesheet" />
    <style type=text/css>
        body {
            font-size: 12px;
            color: #ffffff;
            font-family: 宋体;
            margin: 0px;
            padding: 0px
        }

        td {
            font-size: 18px;
            color: #ffffff;
            font-family: 宋体
        }
    </style>
</head>
<body>
    <div id="app">
        <el-form :model="formData" label-width="80px">
            <div>
                <table cellspacing=0 cellpadding=0 width=900 align=center border=0>
                    <tbody>
                        <tr>
                            <td style="height: 105px">
                                <img src="/images/login_11.gif" border=0>
                            </td>
                        </tr>
                        <tr>
                            <td background=/images/login_22.jpg height=300>
                                <table height=300 cellpadding=0 width=900 border=0>
                                    <tbody>
                                        <tr>
                                            <td colspan=2 height=35></td>
                                        </tr>
                                        <tr>
                                            <td width=350></td>
                                            <td>
                                                <table cellspacing=0 cellpadding=0 border=0>
                                                    <tbody>
                                                        <tr>
                                                            <td prop="UName">登录名</td>
                                                            <td style="height: 28px;">
                                                                <el-form-item style="margin-left:-50px;margin-top:20px">
                                                                    <el-input v-model="formData.Name"
                                                                              placeholder="请输入登录名"></el-input>
                                                                </el-form-item>
                                                            </td>
                                                        </tr>
                                                        <tr>
                                                            <td prop="UPassWord">登录密码</td>
                                                            <td style="height: 28px">
                                                                <el-form-item style="margin-left:-50px;margin-top:20px">
                                                                    <el-input v-model="formData.PassWord"
                                                                              type="password"
                                                                              placeholder="请输入登录密码"
                                                                              show-password />
                                                                </el-form-item>
                                                            </td>
                                                        </tr>

                                                        <tr>
                                                            <td style="height: 18px"></td>
                                                            <td style="height: 18px"></td>
                                                            <td style="height: 18px"></td>
                                                        </tr>
                                                        <tr>

                                                            <td>
                                                                <el-form-item>
                                                                    <!-- 使用 v-on 指令来绑定点击事件 -->
                                                                    <el-button type="primary" v-on:click="submitForm">提交</el-button>
                                                                </el-form-item>
                                                            </td>
                                                        </tr>
                                                    </tbody>
                                                </table>
                                            </td>
                                        </tr>
                                    </tbody>
                                </table>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <img src="/images/login_33.jpg" border=0>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </el-form>
    </div>
    <!-- 引入Vue -->
    <script src="https://unpkg.com/vue@3"></script>
    <!-- 引入Element Plus -->
    <script src="https://unpkg.com/element-plus"></script>
    <!-- 引入axios -->
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script>
        // 创建 Vue 应用程序实例
        const app = Vue.createApp({
            data() {
                return {
                    formData: {
                        Name: '',
                        PassWord: ''
                    },
                    responseMessage: ''
                };
            },
            methods: {
                submitForm() {
                    if (this.formData.Name.length < 2) {

                        alert('登录名要大于6!!')

                    } else if (this.formData.PassWord.length < 2) {
                        alert('密码小于6位数！！')

                    } else {
                        axios.post('User/SelectUser?UName=' + this.formData.Name + '&UPassWord=' + this.formData.PassWord)
                            .then(response => {
                                if (response.data != "") {

                                    alert("登陆成功");
                                    sessionStorage.setItem('users', JSON.stringify(response.data[0].uTrueName || '[]'))
                                    sessionStorage.setItem('users2', JSON.stringify(response.data[0].uId || '[]'))

                                    window.location.href = "Home/index";

                                    // 清空表单
                                    this.formData.Name = '';
                                    this.formData.PassWord = '';
                                } else {
                                    alert("登陆失败！！");
                                }

                            })
                            .catch(error => {
                                alert("登陆失败！！");
                                console.error('Error submitting form:', error);
                            });
                    }

                }
            }
        });

        // 安装 Element Plus
        app.use(ElementPlus);

        // 挂载应用程序到页面上
        app.mount("#app");
    </script>
</body>
</html>